<div
    class="container"
    [style.background]="
        item?.info?.backdrop_path && item?.info?.backdrop_path.length > 0
            ? 'linear-gradient(to top, rgba(29,29,29,1) 0%, rgba(0,0,0,0.5) 100%), url(' +
              item?.info?.backdrop_path[0] +
              ') repeat-x'
            : 'none'
    "
>
    <div class="image">
        <img
            *ngIf="item.info?.movie_image; else placeholderCover"
            [src]="item.info?.movie_image"
        />
        <ng-template #placeholderCover>
            <div class="placeholder-cover"></div>
        </ng-template>
    </div>
    <div class="details">
        <h2>{{ item.info.name }}</h2>
        <label *ngIf="item.info.description">
            {{ item.info.description }}
        </label>
        <label *ngIf="item.info.releasedate">
            <div class="label">{{ 'XTREAM.RELEASE_DATE' | translate }}:</div>
            {{ item.info.releasedate }}
        </label>
        <label *ngIf="item.info.genre">
            <div class="label">{{ 'XTREAM.GENRE' | translate }}:</div>
            {{ item.info.genre }}
        </label>
        <label *ngIf="item.info.country">
            <div class="label">{{ 'XTREAM.COUNTRY' | translate }}:</div>
            {{ item.info.country }}
        </label>
        <div *ngIf="item.info.actors">
            <div class="label">{{ 'XTREAM.ACTORS' | translate }}:</div>
            {{ item.info.actors }}
        </div>
        <label *ngIf="item.info.director">
            <div class="label">{{ 'XTREAM.DIRECTOR' | translate }}:</div>
            {{ item.info.director }}
        </label>
        <label *ngIf="item.info.duration">
            <div class="label">{{ 'XTREAM.DURATION' | translate }}:</div>
            {{ item.info.duration }}
        </label>
        <div class="action-buttons">
            <button
                mat-flat-button
                color="accent"
                (click)="playClicked.emit(item)"
            >
                {{ 'XTREAM.PLAY' | translate }}</button
            >&nbsp;
            <button
                *ngIf="!isFavorite; else removeFromFavoritesButton"
                mat-stroked-button
                color="accent"
                (click)="toggleFavorite()"
            >
                <mat-icon>star_outline</mat-icon>
                {{ 'PORTALS.ADD_TO_FAVORITES' | translate }}
            </button>

            <ng-template #removeFromFavoritesButton>
                <button
                    mat-stroked-button
                    color="accent"
                    (click)="toggleFavorite()"
                >
                    <mat-icon>star</mat-icon>
                    {{ 'PORTALS.REMOVE_FROM_FAVORITES' | translate }}
                </button>
            </ng-template>
        </div>
    </div>
</div>
